import "./index.less";
import { useEffect } from "react";
import { useProgress } from "@react-three/drei";
import { usePage, setPage } from "@/stores/pages";

// 模型加载时显示的页面
export default function Loading() {
  const { progress } = useProgress();
  const loading = usePage((state) => state.loading);

  useEffect(() => {
    if (progress >= 100) {
      setTimeout(() => {
        setPage({ loading: false });
      }, 1500);
    } else {
      setPage({ loading: true });
    }
  }, [progress]);

  return (
    loading && (
      <div className={`loading`}>
        <div>{progress.toFixed()}%</div>
        <div className="tubeBox">
          <div className="tube" style={{ width: `${progress}%` }}></div>
        </div>
      </div>
    )
  );
}
